$theme: (
    orange-color: #ffb800,
    blue-color: #1e9fff,
    black-color: #23292e,
    black-color-2: #2f363c,
    grey-color-1: #fafafa,
    grey-color-2: #f7f7f7,
    grey-color-3: #eeeeee,
    grey-color-4: #e2e2e2,
    grey-color-5: #dddddd,
    grey-color-6: #d2d2d2,
    grey-color-7: #cccccc,
    grey-color-8: #999999,
    red-color: #ff5722,
    green-color: #16b777,
    cyan-color: #16baaa,
    white-color: #fff
);
//body全局字体颜色
$body-color: var(--black-color);
:root {
    @each $name, $value in $theme {
        --#{$name}: #{$value};
    }
}
//颜色
@each $name, $value in $theme {
    .bg-#{$name} {
        background-color: $value;
    }
    .font-#{$name} {
        color: $value;
    }
    .border-#{$name} {
        border-color: $value;
    }
    //背景色提亮
    .bg-#{$name}-lighten {
        background-color: lighten($value, 47%);
    }
}
